<!-- components/ImageModal.vue -->
<template>
	<view class="body">
		<view class="center">
			<view class="name">
				学生证
			</view>
			<view class="qrCode" @click="updateQrCode()">
				<image v-if="studentImage" :src="studentImage" class="quan" mode="widthFix">
				</image>
				<image v-else src="../static/image/add.png" class="add" mode="widthFix">
				</image>
			</view>
			<image src="../static/image/del.png" class="del" mode="widthFix" v-if="studentImage"
				@click.stop="delItemImg()">
			</image>
			<view class="red" v-if="showRealName">
				请上传学生证
			</view>
		</view>
		<view class="item">
			<view class="lable">
				学号
			</view>
			<view class="">
				<input v-model="studentNumber" class="input" placeholder="请输入学号" placeholder-class="input_placeholder"
					@blur="IdBlur" @input="showIdCard = false" />
				<view class="red" v-if="showIdCard">
					请填写学号
				</view>
			</view>
		</view>
		<view class="save" @click="Save">
			提交
		</view>
	</view>
</template>

<script>
	import {
		studentUpdate
	} from '@/api.js'
	export default {
		props: {
			obj: {
				type: Object,
				default: {}
			},
		},
		watch: {
			obj: {
				handler(newVal) {
					this.syncData(newVal)
				},
				deep: true,
				immediate: true,
			}
		},
		data() {
			return {
				studentImage: '',
				showRealName: false,
				studentNumber: '',
				showIdCard: false,
			}
		},

		methods: {
			syncData(source) {
				this.studentImage = source.studentImage;
				this.studentNumber = source.studentNumber;
			},
			delItemImg() {
				this.studentImage = ''
			},
			updateQrCode() {
				if (this.uploadFileRes) {
					return
				}
				let that = this
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: function(res) {

						uni.uploadFile({
							url: 'https://fykq.appldkj.com/api/jeecg-boot/sys/common/upload',
							filePath: res.tempFilePaths[0],
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let msg = JSON.parse(uploadFileRes.data)
								that.$set(that, 'studentImage', msg.message)
								that.nameBlur()
							}
						});
					}
				});
			},
			nameBlur() {
				console.log(this.studentImage);
				if (!this.studentImage || this.studentImage == '') {
					this.showRealName = true
					return false
				} else {
					this.showRealName = false
					return true
				}

			},
			IdBlur() {
				if (!this.studentNumber || this.studentNumber == '') {
					this.showIdCard = true
					return false
				} else {
					this.showRealName = false
					return true
				}

			},
			async Save() {
				if (this.nameBlur() && this.IdBlur()) {
					let res = await studentUpdate({
						studentImage: this.studentImage,
						studentNumber: this.studentNumber
					})
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '上传成功，请耐心等待审核',
							duration: 2000,
							complete() {
								setTimeout(() => {
									uni.navigateBack()
								}, 2000)
							},
						});
					}
				}

			},
		}
	}
</script>

<style scoped lang="scss">
	.body {
		background: #f8f8f8;
		height: 100vh;
		width: 100vw;
		padding: 30rpx 0;
		box-sizing: border-box;

		.item {
			display: flex;
			// align-items: center;
			width: 710rpx;
			margin: 20rpx 20rpx;
			border-bottom: 1rpx solid #ccc;
			padding: 10rpx 0;

			.lable {
				width: 110rpx;
				font-size: 28rpx;
			}

			.input {
				width: 600rpx;
				padding-left: 20rpx;
				font-size: 28rpx;
			}

			.input_placeholder {
				font-size: 28rpx;

			}

			.red {
				font-size: 26rpx;
				color: red;
				padding-left: 20rpx;
			}
		}

		.save {
			font-size: 28rpx;
			letter-spacing: 10rpx;
			width: 710rpx;
			margin: 50rpx 20rpx;
			background: #3C9CFF;
			height: 60rpx;
			color: #fff;
			line-height: 60rpx;
			text-align: center;
		}

		.center {
			display: flex;
			// align-items: center;
			width: 710rpx;
			margin: 20rpx 20rpx;
			border-bottom: 1rpx solid #ccc;
			padding: 10rpx 0;

			.name {
				width: 110rpx;
				font-size: 28rpx;
			}

			.red {
				font-size: 26rpx;
				color: red;
				padding-left: 20rpx;
			}

			.qrCode {
				width: 140rpx;
				height: 140rpx;
				border: 1rpx solid #999;
				position: relative;
				display: flex;
				justify-content: center;
				align-items: center;
				overflow: hidden;

				.add {
					width: 40rpx;
				}

				.quan {
					width: 140rpx;
				}
			}

			.del {
				width: 40rpx;
				margin-left: 30rpx;
			}

			.code {
				width: 520rpx;
				height: 50rpx;
				line-height: 50rpx;
				border: 1rpx solid #999;
				padding: 10rpx;
				box-sizing: border-box;
				font-size: 28rpx;
			}

			.time {
				width: 520rpx;
				height: 50rpx;
				line-height: 50rpx;
				border: 1rpx solid #999;
				padding: 10rpx;
				box-sizing: border-box;
				font-size: 28rpx;
				background-color: #eee;
				color: #666;
			}


		}

	}
</style>